<template>
    <div class="examine">
        <!-- <p class="first-tit">车辆基本信息</p> -->
        <el-row :gutter="20">
		  <el-col :sm="24" :md="12" :lg="12" :xl="12">
		  	<div>
				<el-carousel :interval="5000" arrow="hover">
					<el-carousel-item v-for="(item, index) in res.carImages" :key="index" style="text-align:center;line-height:300px;">
						<img :src="imgUrl+item.imageUrl +'.r_590xh_300'" onerror="javascript:this.src='static/images/default.svg'" class="car-img">
					</el-carousel-item>
				</el-carousel>
		  	</div>
		  </el-col>
		  <el-col  :sm="24" :md="12" :lg="12" :xl="12" style="marginTop:30px">
		  	<table class="top-info top-bor">
		  		<tr>
		  			<td class="top-info-title">车辆名称：</td>
		  			<td>
              <el-input style="border: none" v-model="res.brand.brandName">{{res.brand.brandName || '--' }}</el-input>
            </td>
		  		</tr>
		  		<tr>
		  			<td class="top-info-title">车架号：</td>
		  			<td>
              <el-input v-model="res.carVin"></el-input>
            </td>
		  		</tr>
		  		<tr>
		  			<td class="top-info-title">表显里程：</td>
		  			<td> <el-input  :value="res.carMileage+'万公里'"></el-input></td>
		  		</tr>
		  		<tr>
		  			<td class="top-info-title">实车颜色：</td>
		  			<td > <el-input v-model="res.carOutColor"></el-input>  </td>
		  		</tr>
		  	</table>
		  </el-col>
		</el-row>
        <table class="top-info">
            <tr>
                <td class="top-info-title">车辆零售价：</td>
                <td>{{res.carRetailPrice | filterPrice}}</td>
                <td class="top-info-title">使用性质：</td>
                <td>
                  <span v-if="res.carPurpose">{{res.carPurpose | filterPurpose}}</span>
                  <span v-else>--</span>
                  </td>
            </tr>
            <tr>
                <td class="top-info-title">过户次数：</td>
                <td>{{res.carTransferNum || '--'}}</td>
                <td class="top-info-title">排　　量：</td>
                <td>{{res.carDisplacement || '-'}}{{res.carInletModel || '-'}}</td>
            </tr>
            <tr>
                <td class="top-info-title">保养情况：</td>
                <td>
                  <span v-if="res.car4sUpkeepState">{{res.car4sUpkeepState | filterCarKeepState}}</span>
                  <span v-else>--</span>
                  
                </td>
                <td class="top-info-title">变速箱：</td>
                <td>{{res.carGearbox || '--'}}</td>
            </tr>
            <tr>
                <td class="top-info-title">年审日期：</td>
                <td >
                   <span v-if="res.carValidateDate"> {{res.carValidateDate | filterChDateForSec}}</span>
                   <span v-else>--</span>
                </td>
                <td class="top-info-title">强险到期时间：</td>
                <td>
                  <span v-if="res.carForceInsuranceDate"> {{res.carForceInsuranceDate | filterChDateForSec }}</span>
                  <span v-else>--</span>
                </td>
            </tr>
                <td class="top-info-title">检测状态：</td>
                <td>{{res.carDetectState | filterCarDetectState }}</td>
                <td class="top-info-title">是否认证车源：</td>
                <td>{{res.carAuthState | filterCarAuthState}}</td>
            </tr>
        </table>
        <div class="list-box car-info-panel" v-if="this.$route.query.Show">
            <p class="list-tit">车辆图片</p>
             <div class="img-box">
             <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in imgList" :key="index">
                <div class="box-shade">
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>
                <p class="icon-box icon-delete" @click.prevent="open2(item, index)"></p>
                </div>
                <p>{{item.imageKey | filterImageName}}</p>
                <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
                <input type="file" name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
              </div>
               <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in zjimg" :key="index">
                <div class="box-shade">
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>
                <p class="icon-box icon-delete" @click.prevent="open2(item, index)"></p>
                </div>
                <p>{{item.imageKey | filterImageName}}</p>
                <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
                <input type="file" name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
              </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
             </div>
             </div>
             <div v-else>
                <p class="list-tit">车辆图片</p>
                  <div class="img-box">
                     <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in imgList" :key="index">
                <div class="box-shade">
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>

                </div>
                <p>{{item.imageKey | filterImageName}}</p>
                <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
                <input type="file" name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
              </div>
               <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in zjimg" :key="index">
                <div class="box-shade">
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>
                </div>
                <p>{{item.imageKey | filterImageName}}</p>
                <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
                <input type="file" name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
              </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>

                  </div>
             </div>
         <div class="list-box">
            <p class="list-tit">发布人信息</p>
             <table class="top-info">
            <tr>
                <td class="top-info-title">发布人姓名及手机号：</td>
                <td v-if="res.user.userName">{{res.user.userName}}/ {{res.user.userMobile}}</td>
                <td class="top-info-title">职场角色：</td>
                <td>{{res.user.userRemark || '--'}}</td>
            </tr>
        </table>
        </div>
        <div class="list-box back-btn"  v-if="this.$route.query.Show">
          <p class="list-tit">驳回理由</p>
          <ul class="btn-list clearfix">
            <li v-for="(item, index) in btnText"  :key="index"><el-button :type="item.type" @click="getStates(index, item.type)">{{item.name}}</el-button></li>
          </ul>
          <div class="duoxuan">
             <div
             class="divInp"
              placeholder="请选择"
             >
             <el-input type="textarea"  resize="none" maxlength="1000" ></el-input>

            </div>
            <span class="change" @click="downUp(optionType.options)"><i :class="setClass"></i></span>
              <div v-if="isUp">
                <el-checkbox-group v-model="checkboxGroup1" @change="addCheck"  style=" border: 1px solid #ccc;border-top: none; margin-bottom: 0;">
                  <el-checkbox-button v-for="(item, index) in optionType.options"  :label="item" style="display: block; " :key="index">{{item}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
          </div>
          <div class="textareaBox">
            <el-input
              style="marginTop:20px; width:600px; resize: none;"
              type="textarea"
              size="medium"
              rows="5"
              resize="none"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
          </div>
          <div class="mainBtn">  <el-button type="primary" @click="onSubmit">通过</el-button> <el-button @click="onReject" style="marginLeft:20px">驳回</el-button></div>
        </div>
        <div class="detail-table" v-if="this.$route.query.Show">
           <p class="list-tit">审核记录</p>
           <el-table
            border
            :data="tableData"
            style="width: 100%">
             <el-table-column
            prop="carLogCreateTime"
            label="时间"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carLogCreateTime | filterChDateForSec }}</p>
            </template>
            </el-table-column>
             <el-table-column
            prop="user"
            label="操作人"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.user.userName}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="carStateValue"
            label="操作"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carStateValue | filterCarStateValue}}</p>
            </template>
            </el-table-column>
             <el-table-column
            prop="carLogInfo"
            label="说明"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p v-if="scope.row.carStateValue == '1'" style="cursor: pointer">{{scope.row.carLogInfo}}</p>
            </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
       checkboxGroup1: [],
       information:['VIN录入错误，请修改后上传', '变速箱描述与图片不符', '车身颜色描述与图片不符', '车型与图片不符，请选择正确车型后上传车辆信息',"里程、价格填写错误（以“万”为单位），请更改", "里程数录入与图片不符","请把小计里程调成实际总里程，按照实际总里程录入", "请把英里数（MI）换算成公里数（KM），录入换算后的里程[1MI=1.6KM]" ,"上牌时间不得早于车辆制造时间", "首次上牌时间与车辆年款不符", "售卖价格超过平台新车指导价",  "售卖价格与车辆估值差距较大"],
       picture: ["图片重复，请拍摄不同角度图片上传", "图片中禁止出现联系电话、网址、二维码、其他网站水印等信息，请重新拍照上传", "图片模糊，请重新拍照上传图片","首图上传车辆左前45°角完整车身图片","请正着上传车辆图片","请于光线较好环境拍照，以便更好的展现车辆外观","请上传正确的仪表盘照片，此仪表盘照片不是该车的","请去掉车身积雪，以便更好的展现车辆外观","不得用手指以及其他障碍物出现在镜头遮挡号牌或车身","VIN照片上传错误，请修改后上传","VIN照片模糊/没拍完整，无法识别，请重新拍照上传"],
       others: ["车辆已售","车辆图片未上传成功，请在网络状况良好时上传图片","平台暂不受理此类型车辆"],
      carMileage: ''+"万公里",
      setClass: 'el-icon-arrow-up',
      dialogImageUrl: "",
      newText: '',
      dialogVisible: false,
      problem: "",
      isShow: false,
      tableData: [],
      isPhoto: true,
      textarea: "",
      optionType: {
        options: ""
      },
      btnText: [
        {
          name: "信息问题",
          type: "primary"
        },
        {
          name: "图片问题",
          type: ""
        },
        {
          name: "其他问题",
          type: ""
        }
      ],
      threeValue: "",
      zjimg: [],
      isUp: false,
      toggleClass: false,
      addClass: 'bg',
      addInput: '',
      res: {
        brand: {},
        series: {},
        model: {},
        shop: {},
        market: {},
        region: {},
        carType: {},
        model: {},
        user: {},
        carImages: [],
        carImages: [],
        vehicle_license: "",
        registration_license: "",
        insurance: ""
      },
      imgUrl: imageUrl,
      imgList: []
    };
  },
  mounted() {
    let examoption = {
      carId: this.$route.params.id,
      carStateKey: "carStockState"
    };
    this.$axios
      .get(this.$api.getCarLogList, { params: examoption })
      .then(res => {
        this.tableData = res.data.result;
      });
    if (this.zjimg.length >= 0) {
      this.isPhoto = true;
    } else {
      this.isPhoto = false;
    }
  },
  methods: {
    addCheck () {
      let joinInp = this.checkboxGroup1.join(';');
      this.newText = joinInp;
      this.textarea = this.problem + "：" + this.newText;
      if (this.newText == '') {
        this.textarea = '';
      }
    },
    downUp (val) {
      this.isUp = ! this.isUp;
      if (this.isUp) {
        this.setClass = 'el-icon-arrow-down';

      } else {
        this.setClass = 'el-icon-arrow-up'
      }
    },
    dealImg(item, e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      const fromData = new FormData();
      fromData.append("uploadFile", file);
      reader.onload = () => {
        this.$axios
          .post("/controller/upload/uploadFile", fromData, {
            "Content-Type": "multipart/form-data"
          })
          .then(res => {
            if (res.data.code === 0) {
              this.$message({
                type: "warning",
                message: "上传失败"
              });
            } else {
              this.$message({
                type: "success",
                message: "上传成功"
              });
              item.imageUrl = res.data.result.pathUrl;
            }
          });
      };
    },
    showPreview(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = this.imgUrl + item.imageUrl;
    },
    getStates(ind, type) {
      this.isUp = true;
      if (ind == "0") {
        this.problem = "信息问题";
        this.btnText[0].type = "success";
        this.btnText[1].type = "primary";
        this.btnText[2].type = "primary";
        this.optionType.options = this.information;
      } else if (ind == "1") {
        this.problem = "图片问题";
        this.btnText[0].type = "primary";
        this.btnText[1].type = "success";
        this.btnText[2].type = "primary";
        this.optionType.options = this.picture;
      } else if (ind == "2") {
        this.problem = "其它问题";
        this.btnText[0].type = "primary";
        this.btnText[1].type = "primary";
        this.btnText[2].type = "success";
        this.optionType.options = this.others;
      }
    },
    getval(val) {
      val.map((item, index) => {
        if (item.value == this.threeValue) {
          this.textarea = this.problem + "：" + item.label;
        }
      });
    },
    imgurl(val) {
      val.carImages.map((item, index) => {
        if (
          item.imageKey === "insurance" ||
          item.imageKey === "vehicle_license" ||
          item.imageKey === "registration_license"
        ) {
          this.zjimg.push(item.imageUrl);
        }
      });
    },
    getCarDetial() {
      this.$axios
        .get(this.$api.getCarById, {
          params: { carId: this.$route.params.id, imageViewId: 2 }
        })
        .then(res => {
          this.res = res.data.result;
          console.log(this.res, 'hahahahahahha');
          this.result = res.data.result;
          this.imgurl(this.res);
        });
      this.$axios
        .get(this.$api.getCarImageList, {
          params: { carId: this.$route.params.id, imageViewId: 2 }
        })
        .then(res => {
          this.imgList = res.data.result;
        });
    },
    // 提交事件
    onSubmit() {
      this.$axios
        .get(this.$api.updateCarState, {
          params: {
            carId: this.$route.params.id,
            userId: this.$sess.get('userInfo').userId,
            stateKey: "carStockState",
            stateValue: 20
          }
        })
        .then(res => {
          if (res.data.code == "1") {
            this.$bus.$emit("hidesh");
            this.$router.push("/review");
            this.checkboxGroup1 = [];
            this.setClass = 'el-icon-arrow-up'
            this.newText = '';
            this.textarea = "";
            this.isUp = false;
            this.optionType.options.map((item) => {
              delete item.val;
            });
            this.btnText.map((item, index) => {
              item.type = "primary";
                this.isUp = false;
            });
          }
         
        });
    },
    // 驳回
    onReject() {
      this.$axios
        .get(this.$api.updateCarState, {
          params: {
            carId: this.$route.params.id,
            userId: this.$sess.get('userInfo').userId,
            stateKey: "carStockState",
            stateValue: 1,
            content: this.textarea
          }
        })
        .then(res => {
          if (res.data.code == "1") {
            this.$router.push("/review");
            this.newText = '';
            this.textarea = "";
            this.checkboxGroup1 = [];
            this.isUp = false;
            this.setClass = 'el-icon-arrow-up'
            this.$bus.$emit("back");
            this.optionType.options.map((item) => {
              delete item.val;
            })
            this.btnText.map((item, index) => {
              item.type = "primary";
              this.isUp = false;
            });
          }
        });
    },
    open2(item, index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .get(this.$api.deleteCarImage, {
              params: { imageId: item.imageId }
            })
            .then(res => {
              this.imgList.splice(index, 1);
            });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.$bus.$on("showFind", toggle => {
      this.isShow = toggle;
    });
  },
  activated() {
    this.getCarDetial();
    this.$bus.$on("showFind", toggle => {
      this.isShow = toggle;
    });
    this.$bus.$on("showshen", toggle => {
      this.isShow = true;
      this.isShow = toggle;
    });
  }
};
</script>
<style scoped>
.top-bor{
  border: none;
}
.el-checkbox-button__inner{
  width: 100%;
}
.first-tit{
  margin-top: 0;
  margin-bottom: 20px;
  height: 30px;
  line-height: 30px;
  width: 100%;
  border-left: 5px solid #ff6816;
  padding-left: 10px;
  background-color: #f5f5f5;
  font-weight: bold;
  font-size: 14px;
}
.divInp{
  margin-top:20px;
  width:600px;
  min-height: 40px;
}
.duoxuan{
  position: relative;
  width: 600px;
  margin: 0 auto;
}
.change{
  position: absolute;
  right: 10px;
  font-size: 20px;
  top: 15px;
}
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .bg{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: red;
  }
  .box-card>li {
    font-size: 14px;
    padding: 18px 0;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .box-card {
    width: 598px;
    list-style: none;
    height: auto;
    border: 1px solid #ccc;
    border-top: none;
  }

.back-btn{
  margin: 0 auto;
  width: 500px;

}
.top-info {
  margin-top: 20px;
}
.examine {
  max-width: 1200px;
  margin: auto;
  border-radius: 3px;
  box-sizing: 0 0px 5px #ccc;
  padding: 20px;
  border: 1px solid #e1e1e1;
  color: #000;
}
.img-list {
  width: 100%;
  list-style: none;
  clear: both;
}
.img-list > li {
  width: 20%;
  float: left;
  position: relative;
  margin-left: 20px;
  height: 200px;
}
.img-list > li > img {
  width: 100%;
  height: 200px;
}

.img-list > li > span {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
.list-box {
  width: 100%;
  height: auto;
}
.list-tit {
  height: 30px;
  line-height: 30px;
  width: 100%;
  border-left: 5px solid #2990C4;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f5f5f5;
  margin: 20px 0;
  font-weight: bold;
  font-size: 14px;
  box-sizing: border-box; 
}
.btn-list {
  width: 380px;
  margin: 0 auto;
  list-style: none;

}
.btn-list > li {
  float: left;
  margin-left: 20px;
}
.textareaBox{
  width: 600px;
  margin: 0 auto;
}
.textareaBox textarea {
  resize: none;
  height: 600px;
}
.mainBtn{
  width: 200px;
  margin: 20px auto;
}
</style>

